<template>
  <div class="con">
    <div class="addr_cont" v-loading="loading">
      <div class="addr_top flex">
        收货地址
      </div>
      <div class="add_list" @click="add_addr">新增收货地址</div>
      <ul class="add_list_ul">
        <li class="flex add_list_li" v-for="(list,index) in addressList" :key="index">
          <div
            class="li_a"
          >{{list.addr}}&nbsp;&nbsp;({{list.name}}&nbsp;&nbsp;收)&nbsp;&nbsp;{{list.phone}}</div>
          <div class="li_b flex">
            <p @click="amend(list)">修改&nbsp;&nbsp;|&nbsp;&nbsp;</p>
            <p @click="delate(list.id)">删除</p>
          </div>
          <div class="li_c" @click="isdefu(list.id)">{{list.isdefault}}</div>
        </li>
      </ul>
    </div>
    <div class="modal_delate">
      <el-dialog :visible.sync="modelDelate" width="338px" title="删除">
        <span class="delate_con">您确定要删除该收货地址吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="delateSure()">确 定</el-button>
          <el-button @click="modelDelate = false">取 消</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="modal_amend">
      <el-dialog :visible.sync="modelAmend" width="680px" :title="istitle">
        <div class="amend_con">
          <div class="amend_name">
            <p class="amens_p">收货人:</p>
            <input type="text" v-model="s_name" />
          </div>
          <div class="amend_name">
            <p class="amens_p">手机号码:</p>
            <input type="text" v-model="s_phone" />
          </div>
          <div class="amend_detailaera">
            <p class="amens_p">详细地址:</p>
            <input type="text" v-model="d_address" />
          </div>
          <div class="amend_detailaera flex" style="margin-top:15px;" @click="moren">
            <p class="amens_p" style="margin-bottom:0px;">设置为默认地址:</p>
            <img
              src="../../assets/huiguanbi.png"
              alt
              style="width: 40px;margin-left:15px;"
              v-show="ismoren"
            />
            <img
              src="../../assets/gongdakai1.png"
              alt
              style="width: 45px;margin-left:15px;"
              v-show="!ismoren"
            />
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="amendSure()">保存收货地址</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { ykUserAddr, removeAddr, addAddr, editAddr } from "../../api/index.js";
import options from "../../../static/country-data.js";
export default {
  props: {},
  data() {
    return {
      addressList: [],
      loading: true,
      modelDelate: false, //删除弹窗
      delate_id: "", //删除id
      modelAmend: false, //修改弹窗
      address: options,
      d_address: "", //详细地址
      s_name: "", //收货人
      s_phone: "", //收货手机号
      isaddr: "", //0 是添加 1是修改
      editid: "", //修改的id
      istitle:'',
      userid:'',
      ismoren: true //是否是默认地址
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.userid = localStorage.getItem("YKuserid");
    this.post();
    this.$parent.activeItem();
  },
  watch: {},
  methods: {
    post() {
      let msg = {
        userId: this.userid
      };
      ykUserAddr(this.qs(msg))
        .then(res => {
          // console.log(res);
          for (let i = 0; i < res.data.rows.length; i++) {
            if (res.data.rows[i].isdefault == "1") {
              res.data.rows[i].isdefault = "默认地址";
            } else {
              res.data.rows[i].isdefault = "设为默认";
            }
          }
          this.addressList = res.data.rows;
          this.loading = false;
        })
        .catch(e => {});
    },
    //删除
    delate(id) {
      this.modelDelate = true;
      this.delate_id = id;
    },
    delateSure() {
      let msg = {
        ids: this.delate_id
      };
      removeAddr(this.qs(msg))
        .then(res => {
          this.$message({
            type: "info",
            message: res.data.msg
          });
          if (res.data.code == 0) {
            this.post();
          }
          this.modelDelate = false;
        })
        .catch(e => {});
    },
    //修改
    amend(item) {
    //   console.log(item)
      this.modelAmend = true;
      this.isaddr = "1";
      this.d_address = item.addr;
      this.s_name = item.name;
      this.s_phone = item.phone;
      this.editid = item.id;
      this.istitle='编辑收货地址';
      if (item.isdefault == "设为默认") {
        this.ismoren = true;
      } else {
        this.ismoren = false;
      }
    },
    amendSure() {
      var reg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/;
      if (this.s_name && this.s_phone && this.d_address) {
        if (!reg.test(this.s_phone)) {
          this.$message({
            type: "error",
            message: "手机号格式不正确"
          });
          return;
        }
        let isde;
        if (this.ismoren == true) {
          isde = 0;
        } else if (this.ismoren == false) {
          isde = 1;
        }
        let addmsg = {
          name: this.s_name,
          phone: this.s_phone,
          addr: this.d_address,
          isdefault: isde,
          userId: this.userid,
          id: this.editid || ""
        };
        if (this.isaddr == "0") {
          //添加地址
          addAddr(this.qs(addmsg))
            .then(res => {
              this.$message({
                type: "info",
                message: res.data.msg
              });
              if (res.data.code == 0) {
                this.post();
              }
              this.modelAmend = false;
            })
            .catch(e => {});
        } else if (this.isaddr == "1") {
          editAddr(this.qs(addmsg))
            .then(res => {
              this.$message({
                type: "info",
                message: res.data.msg
              });
              if (res.data.code == 0) {
                this.post();
              }
              this.modelAmend = false;
            })
            .catch(e => {});
        }
        this.d_address = "";
        this.s_name = "";
        this.s_phone = "";
      } else {
        this.$message({
          type: "error",
          message: "所有内容不能为空"
        });
      }
    },
    //新增收货地址
    add_addr() {
      this.modelAmend = true;
      this.isaddr = "0";
      this.istitle='添加收货地址';
      this.d_address = "";
      this.s_name = "";
      this.s_phone = "";
      this.ismoren = true;
    },
    //设为默认
    isdefu(id) {
      let msg = {
        id: id,
        isdefault: "1"
      };
      editAddr(this.qs(msg))
        .then(res => {
          this.$message({
            type: "info",
            message: res.data.msg
          });
          if (res.data.code == 0) {
            this.post();
          }
        })
        .catch(e => {});
    },
    moren() {
      this.ismoren = !this.ismoren;
    }
  },
  components: { }
};
</script>

<style scoped>
.con{
    background: #fff;
}
.addr_cont {
  width: 1027px;
  /* margin: 22px auto; */
}
.addr_top {
  font-size: 16px;
  color: rgba(51, 51, 51, 1);
  margin-left: 30px;
  font-weight:600;
  padding-top:14px;
}
.add_list {
  margin-left: 30px;
  margin-top: 20px;
  width: 109px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border: 1px solid rgba(216, 20, 23, 1);
  font-size: 14px;
  color: rgba(216, 20, 23, 1);
  cursor: pointer;
}
.add_list_ul {
  width: 975px;
  margin-left: 26px;
  padding-bottom:30px;
}
.add_list_li {
  cursor: pointer;
  height: 97px;
  border-bottom: 2px solid #d6d2d2;
  padding: 0 6px;
}
.add_list_li > div {
  letter-spacing: 0.5px;
  font-size: 14px;
  color: #333;
}
.li_a {
  width: 80%;
  margin-right: 10px;
}
.li_b,
.li_c {
  width: 112px;
  text-align: center;
}
.li_c {
  margin-left: 129px;
  border: 1px solid #fff;
}
.li_c:hover {
  width: 112px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  background: rgba(252, 203, 203, 1);
  border: 1px solid rgba(216, 20, 23, 1);
  border-radius: 5px;
  color: rgba(216, 20, 23, 1);
}
.li_b > p:hover {
  color: rgba(216, 20, 23, 1);
}
.modal_delate >>> .el-dialog,
.modal_amend >>> .el-dialog {
  border-radius: 10px !important;
  margin-top: 297px !important;
}
.modal_delate >>> .el-dialog__header,
.modal_amend >>> .el-dialog__header {
  height: 38px;
  background: rgba(253, 224, 225, 1);
  border-radius: 10px 10px 0px 0px;
  padding: 0 !important;
  display: flex;
  align-items: center;
}
.modal_amend >>> .el-dialog__header {
  margin-bottom: 10px;
}
.modal_delate >>> .el-dialog__headerbtn,
.modal_amend >>> .el-dialog__headerbtn {
  top: 10px !important;
}
.modal_delate >>> .el-dialog__title,
.modal_amend >>> .el-dialog__title {
  font-size: 14px !important;
  color: rgba(51, 51, 51, 1) !important;
  margin-left: 18px;
}
.delate_con {
  font-size: 14px !important;
  color: rgba(51, 51, 51, 1) !important;
}
.modal_delate >>> .el-dialog__body {
  text-align: center !important;
  padding: 41px 0 !important;
}
.modal_delate >>> .el-dialog__footer {
  padding: 0px 32px 26px 32px !important;
}
.modal_amend >>> .el-dialog__footer {
  padding: 0px 0px 58px 61px !important;
}
.modal_delate >>> .dialog-footer,
.modal_amend >>> .dialog-footer {
  display: block !important;
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
}
.modal_delate >>> .dialog-footer > button,
.modal_amend >>> .dialog-footer > button {
  height: 40px !important;
  border-radius: 3px !important;
  color: rgba(51, 51, 51, 1) !important;
  background-color: rgba(237, 237, 237, 1) !important;
  border-color: rgba(153, 153, 153, 1) !important;
  font-size: 16px !important;
}
.modal_delate >>> .dialog-footer > button {
  width: 83px !important;
}
.modal_amend >>> .dialog-footer > button {
  width: 145px !important;
}
.modal_amend >>> .el-dialog__body {
  padding: 23px 61px !important;
}
.amens_p {
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
  margin-bottom: 13px;
}
.amend_name > input,
.amend_detailaera > input {
  height: 40px;
  border: 1px solid rgba(153, 153, 153, 1);
  background: #fff;
  padding-left: 10px;
  font-size: 14px;
  color: #333;
}
.amend_name > input {
  width: 247px;
  margin-bottom: 15px;
}
.amend_detailaera > input {
  width: 461px;
}
</style>
